<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <div th:replace="m/head :: head"></div>

</head>

<body>

<div th:replace="m/head :: body('', 'head-with-menu', '作品')"></div>

<!--主体内容-->
<div class="contentwrap">
    <div class="resume-box">
        <div class="con clearfix">
            <ol>
                <li th:each="item, index:${videos.list}">
                    <dl>
                        <dt>
                            <a th:href="@{'/production/detail/' + ${item.id}}">
                                <img th:src="${#request.getAttribute('uploadServer') + item.spriteUrl2}"/>
                                <em class="bf-btn"></em>
                            </a>
                            <div class="bf-bottom">
                                <i class="iconfont icon-shipin"></i>
                                <span cus:count="${item.count}"></span>
                            </div>
                        </dt>
                        <dd>
                            <h3 th:text="${item.name}"></h3>
                            <p th:text="${item.title}"></p>
                            <div class="bottom clearfix">
                                <div class="left">
                                    <a class="btn" th:href="@{'/order/ready/1?sameStyleId=' + ${item.id}}" target="_blank">订购同款</a>
                                </div>
                                <div class="right">
                                    <div th:class="${item.collectUserCollect gt 0 ? 'icon on' : 'icon'}">
                                        <i class="iconfont icon-zanxinxingguanzhu operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="2" data-collect-operation="2"></i>
                                        <span cus:count="${item.collectCount}"></span>
                                    </div>
                                    <div th:class="${item.collectUserLike gt 0 ? 'icon on' : 'icon'}">
                                        <i class="iconfont icon-dianzan operations-collect" th:attr="data-collect-id=${item.id}" data-collect-type="2" data-collect-operation="1"></i>
                                        <span cus:count="${item.likeCount}"></span>
                                    </div>
                                </div>
                            </div>
                        </dd>
                    </dl>
                </li>
            </ol>
        </div>
    </div>
</div>


<div th:replace="m/foot :: foot"></div>

</body>

<div th:replace="m/foot :: footer('')"></div>

<script type="text/javascript" th:src="@{'/static/m/js/dropload.min.js?v=0.1'}"></script>
<script type="text/javascript" th:src="@{'/static/m/js/operations.js?v=0.1'}"></script>

<script type="text/javascript" th:inline="javascript">
    $('.head-nav li[data-item="' + location.href.substring(location.href.lastIndexOf('=') + 1, location.href.length) + '"]').addClass('on');

    var pageNum = [[${videos.pageNum}]] + 1;
    var pageSize = [[${videos.pageSize}]];
    var type = [[${type}]];
    var total = [[${videos.total}]];

    if (total > 16) {
        // 上拉加载效果
        $('.contentwrap').dropload({
            scrollArea: window,
            loadDownFn: function (me) {
                $.ajax({
                    type: 'GET',
                    url: ctx + '/production/api/list' + (type == null ? '' : ('?type=' + type)),
                    data: {
                        pageNum: pageNum,
                        pageSize: pageSize
                    },
                    dataType: 'json',
                    success: function (result) {
                        if (result.status == 200) {
                            if ((result.data.pageNum + 1) == pageNum) {
                                me.noData(true);
                                $('.dropload-down .dropload-load').text('已经到底了');
                                return false;
                            }
                            pageNum = result.data.pageNum + 1;
                            pageSize = result.data.pageSize;
                            for (var i in result.data.list) {
                                var item = result.data.list[i];
                                var html = '<li>\n' +
                                    '           <dl>\n' +
                                    '               <dt>\n' +
                                    '                   <a href="/production/detail/' + item.id + '">\n' +
                                    '                       <img src="' + uploadServer + item.spriteUrl2 + '"/>\n' +
                                    '                       <em class="bf-btn"></em>\n' +
                                    '                   </a>' +
                                    '                   <div class="bf-bottom">\n' +
                                    '                       <i class="iconfont icon-shipin"></i>\n' +
                                    '                       <span>' + item.count + '</span>\n' +
                                    '                   </div>\n' +
                                    '               </dt>\n' +
                                    '               <dd>\n' +
                                    '                   <h3>' + item.name + '</h3>\n' +
                                    '                   <p>' + item.title + '</p>\n' +
                                    '                   <div class="bottom clearfix">\n' +
                                    '                       <div class="left">\n' +
                                    '                           <a class="btn" href="/order/ready/1?sameStyleId=' + item.id + '" target="_blank">订购同款</a>\n' +
                                    '                       </div>\n' +
                                    '                       <div class="right">\n' +
                                    '                           <div class="icon ' + (item.collectUserCollect > 0 ? 'on' : '') + '">\n' +
                                    '                               <i class="iconfont icon-zanxinxingguanzhu operations-collect" data-collect-id="' + item.id + '" data-collect-type="2" data-collect-operation="2"></i>\n' +
                                    '                               <span>' + new Number(item.collectCount).Omit() + '</span>\n' +
                                    '                           </div>\n' +
                                    '                           <div class="icon ' + (item.collectUserLike > 0 ? 'on' : '') + '">\n' +
                                    '                               <i class="iconfont icon-dianzan operations-collect" data-collect-id="' + item.id + '" data-collect-type="2" data-collect-operation="1"></i>\n' +
                                    '                               <span>' + new Number(item.likeCount).Omit() + '</span>\n' +
                                    '                           </div>\n' +
                                    '                       </div>\n' +
                                    '                   </div>\n' +
                                    '               </dd>\n' +
                                    '           </dl>\n' +
                                    '       </li>';
                                $('ol').find('li:last').after(html);
                            }

                            $('.operations-collect').each(function () {
                                var event = $.data(this, 'events') || $._data(this, 'events');
                                if (!event) {
                                    bindCollectEvent(this);
                                }
                            })
                        }
                        // 每次数据加载完，必须重置
                        me.resetload();

                        // bindCollectEvent();
                    },
                    error: function (xhr, type) {
                        alert('内容加载失败');
                        // 即使加载出错，也得重置
                        me.resetload();
                    }
                });
            }
        });
    }
</script>
</html>